<template>
    <!-- 保持原有的模板结构 -->
    <view class="page-container">
        <!-- 顶部导航栏 -->
        <view class="top-nav">
            <u-button type="" class="top-btn" :text="$t('buttonText.home')"></u-button>
            <u-button type="" class="top-btn" :text="$t('buttonText.projection')" @click="goToProgectionPage"></u-button>
            <image src="/static/lang_switcher.png" class="top-image" @click="chooseLanguage"></image>
        </view>
        <view class="page-title">
            <h1>{{$t('textContent.terminalTittle')}}</h1>
        </view>
        <!-- 步骤区域 -->
        <view class="steps-container">
            <!-- 步骤 1 -->
            <view class="step step1">
                <h2>{{$t('textContent.step1')}}</h2>
                <view class="step-description">
                    {{$t('textContent.long_context')}}
					<!-- {{ $t('textContent.animationSelection') }} -->
                </view>
                <u-button type="" class="btn" :text="$t('buttonText.next_step')" :disabled="btn1_disable" @click="step1"></u-button>
            </view>
            <!-- 步骤 2 -->
            <view class="step step2">
                <h2>{{$t('textContent.step2')}}</h2>
                <u-button type="" class="btn" :text="$t('buttonText.settings')" disabled="true"></u-button>
                <!-- WOL 设置区域 -->
                <view class="wol-settings" v-if="showWOL">
                    <view class="input-group">
                        <span>MAC address</span>
                        <input type="text" v-model="mac_address">
                    </view>
                    <view class="input-group">
                        <span>broadcast address</span>
                        <input type="text" v-model="broadcast_address">
                    </view>
                    <view class="input-group">
                        <span>UDP port</span>
                        <input type="text" v-model="udp_port">
                    </view>
                    <u-button type="" class="btn" text="submit" @click="confirm_WOL()"></u-button>
                </view>
                <u-button type="" class="btn" :text="$t('buttonText.turn_on_the_computer')" @click="showWOL = true" :disabled="btn2_disable"></u-button>
                <u-button type="" class="btn" :text="$t('buttonText.next_step')" @click="goToProgectionPage()" :disabled="btn3_disable"></u-button>
            </view>
        </view>
    </view>
</template>

<script>
	// const udp_client = uni.requireNativePlugin("udp-client");
	
export default {
	
    data() {
        return {
            showWOL: false,
            btn1_disable: false,
            btn2_disable: true,
            btn3_disable: true,
            mac_address: '',
            broadcast_address: '',
            udp_port: ''
        };
    },
  onLoad() {
    /**
    * 如果需要使用 hexString， 请在 init 之前调用 
    * 之后会在返回数据多一个 hex 字段
    */
    // udpClient.setUseHex(true);

    /**
    * 设置接受的字节大小，单位是 byte，默认 1024
    * 请按需设置，过大可能会影响性能，或导致奔溃
    */
    // udp_client.setByteSize(2048);

    /**
     * 在设备初始化，监听 10005 端口。
     * 假设本设备 IP 为 192.168.2.35
     * 那么服务端，或者其设备，就可以给 192.168.2.35:10005 发送消息了
     */
    // udp_client.init(this.udp_port, this.onSocketMsg, this.onSocketError);
  },
    methods: {

		chooseLanguage() {
			const languageOptions = this.$i18n.availableLocales.map(locale => {
				return {
					text: locale,
					value: locale
				};
			});
			uni.showActionSheet({
				itemList: languageOptions.map(option => option.text),
				success: res => {
					const selectedLanguage = languageOptions[res.tapIndex].value;
					this.$i18n.locale = selectedLanguage;
					const setLangData = selectedLanguage.slice(0, 2)
					console.log(setLangData, "setLangData")
					uni.request({
						url: `http://${this.ip}:5000/setlang`,
						method: 'POST',
						data: setLangData,
						success: (res) => {
							console.log(res, "22222222222222")
						},
						fail: (res) => {
							console.log(res, "fail11111111111")
						},
					});
					uni.setStorageSync('selectedLanguage', selectedLanguage);
					// uni.redirectTo({
					// url: '/pages/index/index', // 替换为目标页面路径
					// });
		
				}
			});
		},
		
        confirm_WOL() {
            // 发送 WOL
			// udp_client.setByteSize(2048)
			
			// udp_client.send({
			// 	data:this.mac_address,
			// 	port: this.udp_port,
			// 	host:this.broadcast_address,
			// 	useHex:false,
			// })
            // 解禁下一步
            this.btn3_disable = false;

            // 设置完毕，收起 mac、广播、udp 输入框
            this.showWOL = false;
        },
        step1() {
            uni.showModal({
                title: '提示', // 弹出框的标题
                content: '投影仪是否完全启动？', // 弹出框的内容
                success: (res) => {
                    if (res.confirm) {
                        this.btn2_disable = false;
                        this.btn1_disable = true;
                        console.log('用户点击了确认');
                        // 在这里处理确认按钮的逻辑
                    } else if (res.cancel) {
                        console.log('用户点击了取消');
                        // 在这里处理取消按钮的逻辑
                    }
                }
            });
        },
        goToProgectionPage() {
            uni.navigateTo({
                url: '/pages/index/projection'
            });
        }
    }
};
</script>

<style scoped>
.page-container {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.top-btn {
    width: 100px;
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.top-btn:hover {
    background-color: #e9e9e9;
}

.top-image {
    width: 80px;
    height: 80px;
    cursor: pointer;
}

.page-title {
    text-align: center;
    margin-bottom: 30px;
}

.steps-container {
    display: flex;
    justify-content: space-around;
}

.step {
    width: 45%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex; /* 添加 flex 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
}

.step h2 {
    margin-bottom: 10px;
    color: #333;
}

.step-description {
    margin-bottom: 20px;
    color: #666;
}

.btn {
    width: 180px;
    padding: 8px 16px;
    margin: 5px;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #e9e9e9;
}

.wol-settings {
    margin-top: 20px;
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.input-group span {
    margin-right: 10px;
}

.input-group input {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
</style>